<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY css3 effect</title>
    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>
    <link rel="stylesheet" href="../assets/cool.css"/>
    <style>
        .ks-overlay {
            -webkit-animation: overlay_anim 1s ease-in-out 0 1;
            -moz-animation: overlay_anim 1s ease-in-out 0 1;
        }

        @-webkit-keyframes overlay_anim {
            from {opacity:0;}
            to {opacity:1;}
        }

        @-webkit-keyframes overlay_anim2 {
            from {opacity:1;visibility: visible;}
            to {opacity:0;}
        }

        @-moz-keyframes overlay_anim {
            from {opacity:0;}
            to {opacity:1;}
        }

        @-moz-keyframes overlay_anim2 {
            from {opacity:1;visibility: visible;}
            to {opacity:0;}
        }

            /**
            * --------------------------------------------------------
            */

        .ks-overlay-mask {
            -webkit-animation: mask_anim 1s ease-in-out 0 1;
            -moz-animation: mask_anim 1s ease-in-out 0 1;
        }

        @-webkit-keyframes mask_anim {
            from {opacity:0;}
            to {opacity:0.3;}
        }

        @-webkit-keyframes mask_anim2 {
            from {opacity:0.3;visibility:visible;}
            to {opacity:0;visibility:hidden;}
        }

        @-moz-keyframes mask_anim {
            from {opacity:0;}
            to {opacity:0.3;}
        }

        @-moz-keyframes mask_anim2 {
            from {opacity:0.3;visibility:visible;}
            to {opacity:0;visibility:hidden;}
        }
    </style>
</head>
<body>

<div style="height:800px;width: 950px;margin: 0 auto;padding: 20px;">
    <button id="t2">open dialog with css3 effect</button>
</div>

<script>

        KISSY.use("overlay,node", function (S, Overlay,$) {
            var o = new Overlay.Dialog({
                width: 500,
                height: 500,
                mask: true,
                zIndex: 1000,
                closable: true,
                bodyContent: '<div style="height: 200px">test</div>'
            });
            $("#t2").on("click", function () {
                o.center().show();
            });
            o.on('show', function () {
                S.log('show');
            });
            o.on('hide', function () {
                S.log('hide');
            });
        });

</script>
</body>
</html>